import React from 'react'
import { Button, Input, Alert, Divider } from 'antd'
class LifeCyclyChild extends React.Component {
  constructor(props) {
    console.log('[constructor]')
    super(props)
  }

  state = { name: ''}

  componentDidMount() {
    console.log('[componentDidMount]')
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('[componentDidUpdate]')
    console.log('|--- props:', this.props)
    console.log('|--- prevProps:', prevProps)
    console.log('|--- state:', this.state)
    console.log('|--- prevState:', prevState)
    
    // snapshot 是 getSnapshotBeforeUpdate的返回值
    console.log('|--- snapshot:', snapshot)
    
    // 提示：为避免无限循环，所有网络请求都必须位于条件语句中，如下所示
    //if (prevState.data !== this.state.data) {
      // Now fetch the new data here.
    //}
   

  }
  getSnapshotBeforeUpdate (prevProps, prevState){
    console.log('[getSnapshotBeforeUpdate]')
    console.log('|--- props:', this.props)
    console.log('|--- prevProps:', prevProps)
    console.log('|--- state:', this.state)
    console.log('|--- prevState:', prevState)
    return {
      test:"a"
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('[shouldComponentUpdate]')

    console.log('|--- props:', this.props)
    console.log('|--- nextProps:', nextProps)
    console.log('|--- state:', this.state)
    console.log('|--- nextState:', nextState)
    
    return (
      this.props.count !== nextProps.count || this.state.name !== nextState.name
    )
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('[getDerivedStateFromProps]')
    console.log('|--- nextProps:', nextProps)
    console.log('|--- prevState:', prevState)
    return {
      count: nextProps.count ? nextProps.count : 0,
    }
  }

  componentWillUnmount() {
    console.log('[component Will Unmount]')
  }

  onChange = (v) => {
    console.log("---------change name------------")
    this.setState({
      name: v.target.value,
    })
  }
  render() {
    console.log('[render]')
    console.log('|--- state:', this.state)
    console.log('|--- props:', this.props)
    return (
      <div style={{ margin: 8, padding:8,border: '3px solid #eee'}}>
        <h2>I'm Child</h2>
        <span>count : {this.props.count}</span>
        <br />
        <span>name : {this.state.name}</span>
        <Divider></Divider>
        <Input
          value={this.state.name}
          onChange={this.onChange}
          style={{ width: 200 }}
        ></Input>
        <Button type="primary"> setName </Button>
      </div>
    )
  }
}
export default LifeCyclyChild
